<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Swiper的切换</title>
		<link rel="stylesheet" href=./css/swiper.min.css?t=23">
		<style>
			.swiper-slide-li {
				padding: 8px 0;
				font-size: 14px;
				color: #FFFFFF;
				position: relative;
			}
			.title{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24px;
				font-weight: bold;
				margin: 20px 0 30px 0;
			}
			.swiper-slide-li+.swiper-slide-li::after {
				content: '';
				position: absolute;
				right: 20px;
				left: -20px;
				top: 0;
				height: 1px;
				background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
			}
			
			.swiper-slide-li .swiper-slide-li-content {
				display: flex;
				justify-content: space-between;
				padding-right: 20px;
			}
			
			#certify {
				position: relative;
				width: 960px;
				margin: 0px auto;
			}
			
			#certify .swiper-container {
				padding-bottom: 60px;
			}
			#certify .swiper-slide {
				width: 600px;
				background-color: rgba(219, 144, 17, 1);
				height: 650px;
				border-radius: 30px;
				overflow: hidden;
				opacity: 0 !important;
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
			}
			
			#certify .swiper-slide-active {
				opacity: 1 !important;
			}
			
			#certify .swiper-slide-prev,
			#certify .swiper-slide-next {
				opacity: 0.5 !important;
			}
			
			#certify .swiper-slide img {
				display: block;
			}
			
			#certify .swiper-slide p {
				line-height: 98px;
				padding-top: 0;
				text-align: center;
				color: #636363;
				font-size: 1.1em;
				margin: 0;
			}
			
			#certify .swiper-pagination {
				width: 100%;
				bottom: 20px;
			}
			
			#certify .swiper-pagination-bullets .swiper-pagination-bullet {
				margin: 0 5px;
				border: 3px solid #fff;
				background-color: #d5d5d5;
				width: 10px;
				height: 10px;
				opacity: 1;
			}
			
			#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
				border: 3px solid #00aadc;
				background-color: #fff;
			}
			
			/* #certify .swiper-button-prev {
				left: -30px;
				width: 45px;
				height: 45px;
				background: url(../images/wm_button_icon.png) no-repeat;
				background-position: 0 0;
				background-size: 100%;
			}
			
			#certify .swiper-button-prev:hover {
				background-position: 0 -46px;
				background-size: 100%
			}
			
			#certify .swiper-button-next {
				right: -30px;
				width: 45px;
				height: 45px;
				background: url(../images/wm_button_icon.png) no-repeat;
				background-position: 0 -93px;
				background-size: 100%;
			}
			
			#certify .swiper-button-next:hover {
				background-position: 0 -139px;
				background-size: 100%
			}
			
			.swiper-button-prev::after,
			.swiper-button-next::after {
				content: '' !important;
			}
			 */
		</style>
		<script src="./js/swiper.min.js"></script>
	</head>
	<body>
		<div class="title">总站布告栏</div>
		<div id="certify">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<ul class="swiper-slide-ul">
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">关于安排2022年国庆节值班工作的通知</span>
									<span class="swiper-slide-time">2022/09/22</span>
								</div>
							</li>
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">关于安排2022年国庆节值班工作的通知</span>
									<span class="swiper-slide-time">2022/09/22</span>
								</div>
							</li>
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">关于安排2022年国庆节值班工作的通知</span>
									<span class="swiper-slide-time">2022/09/22</span>
								</div>
							</li>
						</ul>
					</div>
					<div class="swiper-slide">
						<ul class="swiper-slide-ul">
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">测试内容和数据213333</span>
									<span class="swiper-slide-time">2000/01/96</span>
								</div>
							</li>
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">关于安排2022年国庆节值班工作的通知</span>
									<span class="swiper-slide-time">2012/08/12</span>
								</div>
							</li>
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">补充文字补充文字补充文字补充文字</span>
									<span class="swiper-slide-time">2001/01/01</span>
								</div>
							</li>
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">补充文字1补充文字补1充文字补1充文字</span>
									<span class="swiper-slide-time">2002/02/02</span>
								</div>
							</li>
						</ul>
					</div>
					<div class="swiper-slide">
						<ul class="swiper-slide-ul">
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">(⊙o⊙)…</span>
									<span class="swiper-slide-time">2030/01/23</span>
								</div>
							</li>
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">🚀🚀🚀🚀🚀🚀🚀🚀</span>
									<span class="swiper-slide-time">2011/06/07</span>
								</div>
							</li>
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">🐵🐵🐵🐵🐵🐵🐵</span>
									<span class="swiper-slide-time">2032/10/14</span>
								</div>
							</li>
						</ul>
					</div>
					
					
					<div class="swiper-slide">
						<ul class="swiper-slide-ul">
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">继续上次一</span>
									<span class="swiper-slide-time">2040/02/12</span>
								</div>
							</li>
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">🚀神州七十二号发射</span>
									<span class="swiper-slide-time">2099/01/01</span>
								</div>
							</li>
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">🐵上树的速度99</span>
									<span class="swiper-slide-time">2102/8/10</span>
								</div>
							</li>
							<li class="swiper-slide-li">
								<div class="swiper-slide-li-content">
									<span class="swiper-slide-tips">上天再借500年</span>
									<span class="swiper-slide-time">2222/8/10</span>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 轮播控制台 -->
			<div class="swiper-pagination"></div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
			
		</div>
		<script>
			// realIndex
			certifySwiper = new Swiper('#certify .swiper-container', {
				watchSlidesProgress: true,
				slidesPerView: 'auto',
				spaceBetween: -180,

				centeredSlides: true,
				loop: true,
				loopedSlides: 5,
				autoplay: false,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				on: {
					progress: function(progress) {
						for (i = 0; i < this.slides.length; i++) {
							var slide = this.slides.eq(i);
							var slideProgress = this.slides[i].progress;
							modify = 1;
							if (Math.abs(slideProgress) > 1) {
								modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
							}
							translate = slideProgress * modify * 260 + 'px';
							scale = 1 - Math.abs(slideProgress) / 5;
							zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
							slide.transform('translateX(' + translate + ') scale(' + scale + ')');
							slide.css('zIndex', zIndex);
							slide.css('opacity', 1);
							if (Math.abs(slideProgress) > 3) {
								slide.css('opacity', 0);
							}
						}
					},
					setTransition: function(transition) {
						for (var i = 0; i < this.slides.length; i++) {
							var slide = this.slides.eq(i)
							slide.transition(transition);
						}
					},
				}
			})
		</script>
	</body>
</html>
